<template>
  <div class="data">
    <Tabs type="card">
      <TabPane label="WANO指标">
        <div style="margin-bottom:10px;">
          <Button type="success" class="xinzheng" @click="add">新增指标</Button>
          <Button type="primary">导出Excel</Button>
        </div>
        <Table border :columns="columns" :loading="loading" :data="tableData"></Table>
        <Page
        show-total
        :current="pageNo"
          :total="total"
          :page-size="pageSize"
          style="margin:20px auto;text-align:center"
          @on-change="changePage"
          show-elevator
        />
      </TabPane>
      <TabPane label="机组季度状态值">
        <div style="margin-bottom:10px;">
          <Button type="success" class="xinzheng" @click="add2"
            >新增状态值</Button
          >
          <Button type="primary">导出Excel</Button>
        </div>
        <Table
          border
          :columns="columns2"
          :data="tableData2"
        ></Table>
        <Page
        show-total
        :current="pageNo2"
          :total="total2"
          :page-size="pageSize2"
          style="margin:20px auto;text-align:center"
          @on-change="changePage2"
          show-elevator
        />
      </TabPane>

    </Tabs>
    <!-- 新增、编辑指标开始 -->
    <Modal :mask-closable="false" v-model="modal1" :title="title1">
      <Form :model="formItem" :label-width="120">
        <FormItem label="年份">
          <DatePicker v-model="formItem.year" format="yyyy"   @on-change="time1" type="year" placeholder="Select year" style="width:100%"></DatePicker>
        </FormItem>
        <FormItem label="WANO先进值">
          <Input v-model="formItem.xianjin" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="WANO中间值">
          <Input v-model="formItem.zhongjian" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="记录人">
          <Input v-model="recordUserName" disabled placeholder="请输入"></Input>
          <!-- <Select v-model="formItem.jilu" label-in-value clearable filterable>
            <Option
              v-for="(item, index) in peopleList"
              :value="item.trueName"
              :key="index"
              >{{ item.trueName }}</Option
            >
          </Select> -->
        </FormItem>
        <FormItem label="记录时间">
          <Input v-model="recordTime" disabled placeholder="请输入"></Input>
          <!-- <DatePicker
            @on-change="time1"
            v-model="formItem.jiluTime"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="Select date and time"
            style="width: 100%"
          ></DatePicker> -->
        </FormItem>
      </Form>
      <div slot="footer">
               <Button @click="modal1=false">取消</Button>
              <Button type="primary" :loading="btnClick" @click="ok">确定</Button>
          </div>
    </Modal>
    <!-- 新增、编辑指标弹窗结束 -->
    <!-- 新增、编辑状态值开始 -->
    <Modal :mask-closable="false" v-model="modal2" :title="title2">
      <Form :model="formItem2" :label-width="80">
        <FormItem label="季度">
          <DatePicker v-model="formItem2.quarter" format="yyyy"  @on-change="time2" type="year" placeholder="Select year" style="width:100px"></DatePicker> 年
          <Select v-model="formItem2.yearQuarter" style="width:100px">
            <Option value="第一季度">第一季度</Option>
            <Option value="第二季度">第二季度</Option>
            <Option value="第三季度">第三季度</Option>
            <Option value="第四季度">第四季度</Option>
          </Select>
        </FormItem>
        <!-- <FormItem label="机组档案">
          <Select v-model="jizhu" filterable style="width:200px;">
            <Option
              v-for="(item, index) in jzdaList"
              :value="index"
              :key="index"
              >{{ item.equipmentName }}</Option
            >
          </Select>
          <Button @click="addJizhu" type="primary">添加</Button>
        </FormItem> -->
        <Table
          style="margin-bottom:15px;"
          border
          v-if="jizhuList.length > 0"
          :columns="columns3"
          :data="jizhuList"
        ></Table>
        <FormItem label="记录人">
          <Input v-model="recordUserName" disabled placeholder="请输入"></Input>
          <!-- <Select v-model="formItem2.jilu" label-in-value clearable filterable>
            <Option
              v-for="(item, index) in peopleList"
              :value="item.trueName"
              :key="index"
              >{{ item.trueName }}</Option
            >
          </Select> -->
        </FormItem>
        <FormItem label="记录时间">
          <Input v-model="recordTime" disabled placeholder="请输入"></Input>
          <!-- <DatePicker
            @on-change="time2"
            type="datetime"
            v-model="formItem2.jiluTime"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="Select date and time"
            style="width: 100%"
          ></DatePicker> -->
        </FormItem>
      </Form>
      <div slot="footer">
               <Button @click="modal2=false">取消</Button>
              <Button type="primary" :loading="btnClick2" @click="ok2">确定</Button>
          </div>
    </Modal>
    <Modal :mask-closable="false"
      v-model="modal3"
      width="360"
      class-name="vertical-center-modal"
      @on-ok="remove(delID)"
    >
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>确认删除</span>
      </p>
      <div style="text-align:center">
        <p>确认删除此数据么？</p>
      </div>
    </Modal>
    <Modal :mask-closable="false"
      v-model="modal4"
      width="360"
      class-name="vertical-center-modal"
      @on-ok="remove2(delID2)"
    >
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>确认删除</span>
      </p>
      <div style="text-align:center">
        <p>确认删除此数据么？</p>
      </div>
    </Modal>
    <!-- 新增、编辑状态值结束 -->
  </div>
</template>

<script>
import { getTableData, add, update, del } from "@/api/kpi";

import {
  getTableData as getTableData2,
  add as add2,
  update as update2,
  del as del2,
  getAll,
  findListByStatusValueId
} from "@/api/statusValue";

import { getAllPeople,getTime,getAllEqu } from "@/api/select";

export default {
  data() {
    let that=this;
    return {
      btnClick:false,
      btnClick2:false,
      loading:true,
      delID: 0,
      modal3: false,
      delID2: 0,
      modal4: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      isAdd: true,
      jzdaList: [],
      jizhu: "",
      jizhuList: [],
      peopleList: [],
      modal1: false,
      modal2: false,
      title1: "新增指标",
      title2: "新增状态值",
      recordUserName: localStorage.getItem('recordUserName'),
      recordUserId:localStorage.getItem('recordUserId'),
      recordTime:getTime(),
      formItem: {
        id: undefined,
        year: "",
        xianjin: "",
        zhongjian: "",
        recordTime: "",

      },

      pageNo2: 1,
      pageSize2: 10,
      total2: 0,
      isAdd2: true,
      formItem2: {},
      columns: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          title: "年份",
          key: "year"
        },
        {
          title: "WANO先进值",
          key: "xianjin"
        },
        {
          title: "WANO中间值",
          key: "zhongjian"
        },
        {
          title: "记录人",
          key: "recordUserName"
        },
        {
          title: "记录时间",
          width: 200,
          key: "recordTime"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(JSON.stringify(params));
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.openDel(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData: [],
      columns2: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          title: "季度",
          key: "quarter",
          render: (h, params) => {
            return h("div", params.row.quarter+'年'+params.row.yearQuarter);
          }
        },
        {
          title: "记录人",
          key: "recordUserName"
        },
        {
          title: "记录时间",
          width: 200,
          key: "recordTime"
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit2(JSON.stringify(params));
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.openDel2(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData2: [],

      columns3: [
        {
          title: "电站",
          key: "powerStation"
        },
        {
          title: "HD编号",
          key: "hdNumber"
        },
        {
          title: "机组",
          key: "aircrewNumber"
        },
        {
          title: "值",
          key: "value",
          align: "center",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: params.row.value,
                size: "small"
              },
              on: {
                input: val => {
                  that.jizhuList[params.index].value = val;
                }
              }
            });
          }
        },
        // {
        //   title: "操作",
        //   key: "action",
        //   align: "center",
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "Button",
        //         {
        //           props: {
        //             type: "error",
        //             size: "small"
        //           },
        //           on: {
        //             click: () => {
        //               this.del3(params.index);
        //             }
        //           }
        //         },
        //         "删除"
        //       )
        //     ]);
        //   }
        // }
      ]
    };
  },
  methods: {
    del3(index) {
      this.jizhuList.splice(index, 1);
    },
    addJizhu() {
      if (this.jizhu != "") {
        this.jizhuList.push(this.jzdaList[this.jizhu]);
      } else {
        this.$Message.info("请选择机组档案");
      }
      console.log(this.jizhuList);
    },
    time1(e) {
      console.log("e>" + e);
      this.formItem.year = e;
    },
    time2(e) {
      console.log("e>" + e);
      this.formItem2.quarter = e;
    },
    openDel(id) {
      this.modal3 = true;
      this.delID = id;
    },
    remove(id) {
      del({ id: id })
        .then(res => {
          if (res.code == 0) {
            this.$Message.info("删除成功");
            this.pageNo=1
            this.getDataList();
          } else {
            this.$Message.info(res.message);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    add() {
      this.isAdd = true;
      this.title1 = "新增指标";
      this.formItem.id = undefined;
      this.formItem.year = "";
      this.formItem.xianjin = "";
      this.formItem.zhongjian = "";
      this.modal1 = true;
    },
    edit(params) {
      this.isAdd = false;
      this.title1 = "编辑指标";
      this.formItem = JSON.parse(params).row;
      this.modal1 = true;
    },
    openDel2(id) {
      this.modal4 = true;
      this.delID2 = id;
    },
    remove2(id) {
      del2({ id: id })
        .then(res => {
          if (res.code == 0) {
            this.$Message.info("删除成功");
            this.pageNo2=1
            this.getDataList2();
          } else {
            this.$Message.info(res.message);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },

    add2() {
      this.isAdd2 = true;
      this.title2 = "新增状态值";
      this.formItem2={};
      this.jizhuList=[];
      this.getAllEqument();
      this.modal2 = true;
    },
    edit2(params) {
      this.isAdd2 = false;
      this.title2 = "编辑状态值";
      this.formItem2 = JSON.parse(params).row;
      this.modal2 = true;
      findListByStatusValueId({statusValueId:JSON.parse(params).row.id}).then(res => {
        if (res.code == 0) {
          this.jizhuList = res.data
        }
      })
    },
    timeFormat (time) {
                const dateTime = new Date(time)
                const year = dateTime.getFullYear()
                return year
            },
    ok() {
      this.btnClick=true;
      let params = {
        id: this.formItem.id,
        years: this.timeFormat(this.formItem.year),
        advanceValue: this.formItem.xianjin,
        middleValue: this.formItem.zhongjian,
        recordUserName: this.recordUserName,
        recordUserId:this.recordUserId,
        recordTime: this.recordTime
      };
      console.log("params>" + JSON.stringify(params));

      if (this.isAdd) {
        add(params)
          .then(res => {
            console.log("res>" + JSON.stringify(res));
            if (res.code == 0) {
              this.$Message.info("新增成功");
              this.getDataList();
              this.modal1 = false
            this.btnClick=false;
            } else {
              this.$Message.info(res.message);
            this.btnClick=false;
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      } else {
        update(params)
          .then(res => {
            console.log("res>" + JSON.stringify(res));
            if (res.code == 0) {
              this.$Message.info("修改成功");
              this.getDataList();
              this.modal1 = false
            this.btnClick=false;
            } else {
              this.$Message.info(res.message);
            this.btnClick=false;
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      }
    },
    ok2() {
            this.btnClick2=true;
      let params = {
        id: this.formItem2.id,
        quarter: this.timeFormat(this.formItem2.quarter),
        yearQuarter:this.formItem2.yearQuarter,
        recordUserName: this.recordUserName,
        recordTime: this.recordTime,
        recordUserId:this.recordUserId
      };

      if (this.isAdd2) {
        for(var i=0;i<this.jizhuList.length;i++){
        params['list['+i+'].aircrewNumber']=this.jizhuList[i].aircrewNumber;
        params['list['+i+'].equipmentId']=this.jizhuList[i].id;
        params['list['+i+'].hdNumber']=this.jizhuList[i].hdNumber;
        params['list['+i+'].powerStation']=this.jizhuList[i].powerStation;
        params['list['+i+'].statusValueId']=this.jizhuList[i].statusValueId;
        params['list['+i+'].value']=this.jizhuList[i].value;
      }
        add2(params)
          .then(res => {
            console.log("res>" + JSON.stringify(res));
            if (res.code == 0) {
              this.$Message.info("新增成功");
              this.getDataList2();
              this.modal2 = false
            this.btnClick2=false;
            } else {
              this.$Message.info(res.message);
            this.btnClick2=false;
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      } else {
        for(var i=0;i<this.jizhuList.length;i++){
        params['list['+i+'].aircrewNumber']=this.jizhuList[i].aircrewNumber;
        params['list['+i+'].equipmentId']=this.jizhuList[i].equipmentId;
        params['list['+i+'].hdNumber']=this.jizhuList[i].hdNumber;
        params['list['+i+'].powerStation']=this.jizhuList[i].powerStation;
        params['list['+i+'].statusValueId']=this.jizhuList[i].statusValueId;
        params['list['+i+'].value']=this.jizhuList[i].value;
      }
        update2(params)
          .then(res => {
            console.log("res>" + JSON.stringify(res));
            if (res.code == 0) {
              this.$Message.info("修改成功");
              this.getDataList2();
              this.modal2 = false
            this.btnClick2=false;
            } else {
              this.$Message.info(res.message);
            this.btnClick2=false;
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      }
    },
    changePage2(pageNo2) {
      this.pageNo2 = pageNo2;
      this.getDataList2();
    },
    /** 分页 */
    changePage(pageNo) {
      this.pageNo = pageNo;
      this.getDataList();
    },
    getDataList() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      getTableData(params)
        .then(res => {
          console.log("res>" + JSON.stringify(res));
          if (res.code == 0) {
            this.total = res.data.total;
            let list = res.data.list;
            this.tableData = list.map(item => {
              let it = {};
              it.id = item.id;
              it.year = item.years;
              it.xianjin = item.advanceValue;
              it.zhongjian = item.middleValue;
              it.recordUserName = item.recordUserName;
              it.recordTime = item.recordTime;
              return it;
            });
            this.loading=false;
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },

    getDataList2() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      getTableData2(params)
        .then(res => {
          console.log("res>" + JSON.stringify(res));
          if (res.code == 0) {
            this.total2 = res.data.total;
            let list = res.data.list;
            this.tableData2 = res.data.list
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    // getjzda() {
    //   getAll(null)
    //     .then(res => {
    //       if (res.code == 0) {
    //         this.jzdaList = res.data;
    //       }
    //     })
    //     .catch(err => {
    //       console.error("err>" + JSON.stringify(err));
    //     });
    // },
    //获取所有人员
    getAllPeople() {
      getAllPeople(null)
        .then(res => {
          this.peopleList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
     getAllEqument() {
      getAllEqu(null).then(res => {
        this.jizhuList = res.data;
      });
    },
  },

  mounted() {},
  created() {
    this.getAllEqument()
    this.getDataList();
    this.getDataList2();
    this.getAllPeople();
  }
};
</script>

<style lang="less">
.data {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .xinzheng {
    margin-right: 10px;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    border-radius: 0;
    background: #fff;
    margin-right: 10px;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    border-top: 2px solid #3399ff;
  }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
